<template>
  <div class="app-container">
    <div class="search-box">
      <div class="search-hd">规则运行异常</div>
      <div class="search-bd">
        <el-form ref="form" :model="searchField" :inline="true">
          <el-form-item label="应用编号" size="small">
            <el-input
              placeholder="请输入内容"
              v-model="searchField.wfNum"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="用户id" size="small">
            <el-input
              placeholder="请输入内容"
              v-model="searchField.wfActionuserid"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="用户名称" size="small">
            <el-input
              placeholder="请输入内容"
              v-model="searchField.wFActionUserName"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="searchField.date"
              size="small"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-button
            type="success"
            size="small"
            @click="selectSelectived(searchField)"
            >查询</el-button
          >
          <!--<el-button type="success" size="small">导出</el-button>-->
        </el-form>
      </div>
    </div>
    <div class="main-box">
      <div class="title main-hd">
        <div class="main-hd">规则运行异常</div>
        <div class="but">
          <el-button type="success" size="mini" @click="handle1()"
            >修改</el-button
          >
          <el-button
            style="margin-left: 10px"
            type="danger"
            size="mini"
            @click="ignore1()"
            >删除</el-button
          >
        </div>
      </div>
      <!-- 查看业务流程详细信息的dialog框 -->
      <el-dialog
        title="处理内容"
        :visible.sync="dialogVisiblerulerunerror"
        width="50%"
      >
        <span>{{ rulerunerror }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisiblerulerunerror = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="dialogVisiblerulerunerror = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <el-table
        v-loading="loading"
        :data="list"
        stripe
        max-height="500"
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" width="95" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="应用编号"
          prop="bpmConsoleError.wfNum"
          align="center"
        ></el-table-column>
        <el-table-column
          label="用户id"
          prop="bpmConsoleError.wfActionuserid"
          align="center"
        ></el-table-column>
        <el-table-column
          label="用户名称"
          prop="bpmConsoleError.wFActionUserName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="处理人"
          prop="hPeople"
          align="center"
        ></el-table-column>
        <el-table-column
          label="处理结果"
          prop="hResult"
          align="center"
        ></el-table-column>
        <el-table-column label="处理内容" align="center">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              type="success"
              @click="showDetail(scope.row)"
              >查看</el-link
            >
          </template>
        </el-table-column>
        <el-table-column
          label="处理时间"
          prop="hTime"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="handle(scope.row)"
              >修改</el-button
            >
            <el-button
              style="margin-left: 10px"
              type="danger"
              size="mini"
              @click="ignore(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchField.page"
          :page-sizes="[10, 15, 20, 25, 30, 50]"
          :page-size="searchField.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 处理弹框 -->
    <el-dialog title="处理日志" :visible.sync="dialogFormVisible">
      <el-form :model="logForm">
        <el-form-item label="处理人" :label-width="formLabelWidth">
          <el-input v-model="logForm.hPeople" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="logForm">
        <el-form-item label="处理时间" :label-width="formLabelWidth">
          <!--<el-input v-model="logForm.name" autocomplete="off"></el-input>-->
          <template>
            <div class="block">
              <el-date-picker
                v-model="logForm.hTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </div>
          </template>
        </el-form-item>
      </el-form>
      <el-form :model="logForm">
        <el-form-item label="处理标题" :label-width="formLabelWidth">
          <el-input v-model="logForm.hTitle" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="logForm">
        <el-form-item label="处理内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="logForm.hContent"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="logForm">
        <el-form-item label="处理结果" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="logForm.hResult"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handle2(logForm)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  findAllConsoleError,
  findConsoleErrorSelected,
  errorfindAll,
  errordelete,
  errorupdate,
} from "@/api/table";

export default {
  data() {
    return {
      list: null,
      loading: true,
      rulerunerror: null,
      total: 10,
      searchField: {
        pname: "",
        oname: "",
        type: "",
        startTime: "",
        endTime: "",
        page: 1,
        limit: 15,
        date: "",
        wfActionuserid: "",
        wFActionUserName: "",
        wfNum: "",
      },
      checkedId: "",
      checkList: [],
      dialogVisible: false,
      dialogVisiblerulerunerror: null,
      dialogFormVisible: false,
      logForm: {
        id: "",
        hTime: "",
        hPeople: "",
        hContent: "",
        isignore: "",
        hTitle: "",
        hResult: "",
      },
      dialogUpdateFormVisible: false,
      form: {
        id: "",
        pid: "",
        name: "",
        type: "",
        configs: "",
        contact: "",
        isDelete: 0,
        address: "",
        extention: "",
        serialVersionUID: 0,
        mProject: {
          id: "",
          name: "",
          server: "",
          db: "",
          mission: "",
          service: "",
          number: "",
          provider: "",
          tel: "",
          extention: "",
        },
      },
      formLabelWidth: "120px",
      ary: {},
    };
  },
  created() {
    this.initListData();
  },
  methods: {
    //处理提交
    handle2(logForm) {
      console.log(logForm);
      this.dialogFormVisible = false;
      // 向后台发送请求
      this.multipleSelection.forEach((item) => {
        let x=JSON.parse(JSON.stringify(this.logForm))
        console.log(item);
        x.id = item;
        errorupdate(x).then((res) => {
          console.log(res);
          this.initListData();
        });
      });
    },
    //选择
    handleSelectionChange(val) {
      console.log(val);
      //批量处置
      this.ary = val[0];
      //批量删除
      this.multipleSelection = val.map((item) => {
        return item.id;
      });
      console.log(this.multipleSelection);
    },
    // 处置
    handle(row) {
      console.log(row);
      this.logForm.id = row.id;
      this.logForm.hTime = row.hTime;
      this.logForm.hPeople = row.hPeople;
      this.logForm.hContent = row.hContent;
      this.logForm.hTitle = row.hTitle;
      this.logForm.hResult = row.hResult;
      this.dialogFormVisible = true;
    },
    // 批量处置
    handle1() {
      this.logForm.id = this.ary.id;
      this.logForm.hTime = this.ary.hTime;
      this.logForm.hPeople = this.ary.hPeople;
      this.logForm.hContent = this.ary.hContent;
      this.logForm.hTitle = this.ary.hTitle;
      this.logForm.hResult = this.ary.hResult;
      this.dialogFormVisible = true;
    },
    load() {
      this.count += 2;
    },
    //查看
    showDetail(row) {
      console.log(row);
      this.dialogVisiblerulerunerror = true;
      this.rulerunerror = row.hContent;
    },
    // 批量忽略
    ignore1(row) {
      this.open(this.multipleSelection);
    },
    // 忽略
    ignore(row) {
      this.multipleSelection = [];
      this.multipleSelection.push(row.id);
      this.open(this.multipleSelection);
    },
    // 删除
    del(id) {
      console.log(id);
      errordelete(id).then((res) => {
        this.initListData();
      });
    },
    initListData() {
      this.loading = true;
      // 规则运行异常记录
      errorfindAll(this.searchField).then((res) => {
        this.list = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchField.limit = val;
      this.pagingQuery();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      console.log(`当前页: ` + val);
      this.searchField.page = val;
      this.pagingQuery();
    },
    // 删除确认的提示框
    open(id) {
      this.$confirm("此操作将永久删除该监控源, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.del(id);
      });
    },
    // 分页查询函数
    pagingQuery(searchField) {
      findAllConsoleError(this.searchField).then((res) => {
        this.list = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    selectSelectived() {
      findConsoleErrorSelected(this.searchField).then((res) => {
        this.list = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.redColor {
  color: red;
}

.search-box {
  margin-bottom: 15px;

  .search-hd {
    border-left: 2px solid #00a73c;
    padding: 10px;
    margin-bottom: 10px;
  }

  .search-bd {
    .el-button--small {
      margin-top: 3px;
    }
  }
}

.main-box {
  .main-hd {
    height: 40px;
    line-height: 40px;
    background: #00a73c;
    color: #fff;
    padding-left: 10px;
  }

  .page-box {
    padding: 10px;
    text-align: center;
  }
}
.list {
  max-height: 500px;
  overflow: scroll;
}
.but {
  float: right;
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
